@charset "utf-8";

@import "reset";

$font-size:40;

@function r($px){
    @return $px/$font-size*1rem;
}

html,body{
    width: 100%;
    height: 100%;
    position: relative;
}

.web{
    width: 100%;
    height: 100%;
    position: absolute;
    background: url('../img/wedding-bg.jpg')no-repeat;
    background-size:100% ;
}

.active{
//  display: block;
    animation: bian 1s linear  forwards;
    @keyframes bian{
        0%{transform: scale(0.2);}
        100%{transform: scale(1);}
    }
}



.pop-up-windows{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(123,2,7,.5);
    z-index: 99;
    display: none;
    .window-tc{
        width: r(413);
        height: r(250);
        background: url(../img/window-tc.png)no-repeat;
        position: absolute;
        background-size: 100%;
        left: r(115);
        top: r(356);
        .closeBtn1{
            width: r(36);
            height: r(36);
            position: absolute;
            right: r(18);
            top: r(11);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .tc-msg{
            width: r(360);
            height: r(32);
            position: absolute;
            left: r(48);
            top: r(106);
            font-size:r(32);
            color: #bf0c21;
        }    
    }   
}


.pop-up-windows1{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(123,2,7,.5);
    z-index: 99;
//  display: none;
    .window-tc{
        width: r(413);
        height: r(250);
        background: url(../img/window-tc.png)no-repeat;
        position: absolute;
        background-size: 100%;
        left: r(115);
        top: r(356);
        #titleTc{
            text-align: center;
            font-size: r(24);
            color: #bf0c21;
            line-height: r(50);
        }
        .closeBtn2{
            width: r(36);
            height: r(36);
            position: absolute;
            right: r(18);
            top: r(11);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .tc-msg{
            width: r(360);
            height: r(32);
            position: absolute;
            left: r(48);
            top: r(106);
            font-size:r(32);
            color: #bf0c21;
        }
        .checkBtn{
            display: inline-block;
            width: r(222);
            height: r(38);
            background: #bf0c21;
            color: #e7c598;
            margin: 0 auto;
            margin-left: r(95);
            text-align: center;
            border-radius: r(10);
            font-size: r(22);
            line-height: r(38);
        }
         #ruxiBtn{
            display: inline-block;
            width: r(222);
            height: r(38);
            background: #bf0c21;
            color: #e7c598;
            margin: 0 auto;
            margin-left: r(95);
            text-align: center;
            border-radius: r(10);
            font-size: r(22);
            line-height: r(38);
        }
        
    }
    
}


.pop-up-windows2{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(123,2,7,.5);
    z-index: 99;
    display: none;
    .window-tc{
        width: r(413);
        height: r(250);
        background: url(../img/window-tc.png)no-repeat;
        position: absolute;
        background-size: 100%;
        left: r(115);
        top: r(356);
        #titleTc{
            text-align: center;
            font-size: r(24);
            color: #bf0c21;
            line-height: r(90);
        }
        .closeBtn3{
            width: r(36);
            height: r(36);
            position: absolute;
            right: r(18);
            top: r(11);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .tc-msg{
            width: r(360);
            height: r(32);
            position: absolute;
            left: r(48);
            top: r(106);
            font-size:r(32);
            color: #bf0c21;
        }
        .checkBtn{
            display: inline-block;
            width: r(222);
            height: r(38);
            background: #bf0c21;
            color: #e7c598;
            margin: 0 auto;
            margin-left: r(95);
            text-align: center;
            border-radius: r(10);
            font-size: r(22);
            line-height: r(38);
        }
         .checkBtn1{
            display: inline-block;
            width: r(222);
            height: r(70);
            background: #bf0c21;
            color: #e7c598;
            margin: 0 auto;
            margin-left: r(95);
            text-align: center;
            border-radius: r(10);
            font-size: r(22);
            line-height: r(38);
        }
        
    }
    
}



section{
    width: 100%;
    position: absolute;
    bottom: r(180);
    top: 0;
    overflow-y: scroll;
    
    #content{
        width: 90%;
        margin: 0 auto;
    }
    
     .jiuxishu{
        width: r(190);
        height: r(200);
        display: inline-block;
        position: relative;
        margin-left:r(62) ;
         .bigtable{
            width: r(89);
            height: r(87);
            background: #e7c598;
            color: #bf0c21;
            text-align: center;
            position: absolute;
            left:50%;
            margin-left: r(-45);
            top: r(56);
            line-height: r(87);
            font-size: r(23);
            border-radius: 50%;
            box-shadow: r(5) r(5) rgba(0,0,0,.7);
            #shu{
               display: inline-block;
               width: r(3);
               height: r(50);
               background: #bf0c21;
                position: absolute;
                left:50%;
                margin-left: r(-1.5);
                top: r(25);
            }
            #heng{
                 display: inline-block;
                width: r(50);
                height: r(3);
                background: #bf0c21;
            }
        }
        .zhuowei{
            width: r(45);
            height: r(45);
            border-radius: 50%;
            font-size: r(14);
            text-align: center;
            line-height: r(45);
            box-shadow: r(5) r(3) rgba(0,0,0,.5);
            background:#e7c598 ; 
            color: #bf0c21;   
        }
        .a1{
            position: absolute;
            left: r(72);
            top: 0;
        }
        .a2{
            position: absolute;
            right: 0;
            top: r(48);
        }
        .a3{
            position: absolute;
            right: 0;
            bottom: r(49);
        }
        .a4{
            position: absolute;
            right: r(70);
            bottom: 0;
        }
        .a5{
            position: absolute;
            left: 0;
           bottom: r(49);
        }
        .a6{
             position: absolute;
            left: 0;
            top: r(48);
        }
        }
    
    
    .zhubing{
        width: r(220);
        height: r(240);
       position: relative;
        margin: 0 auto;
        .bigtable{
            width: r(122);
            height: r(125);
            background: #e7c598;
            color: #bf0c21;
            text-align: center;
            position: absolute;
            left:r(55) ;
            top: r(56);
            line-height: r(125);
            font-size: r(23);
            border-radius: 50%;
            box-shadow: r(2) r(2) rgba(0,0,0,.7);
        }
        .zhuowei{
            width: r(45);
            height: r(45);
            border-radius: 50%;
            font-size: r(14);
            text-align: center;
            line-height: r(45);
            box-shadow: r(5) r(5) rgba(0,0,0,.7);
            background:#e7c598 ; 
            color: #bf0c21;   
        }
        .a1{
            position: absolute;
            left: r(85);
            top: 0;
        }
        .a2{
            position: absolute;
            right: 0;
            top: r(48);
        }
        .a3{
            position: absolute;
            right: 0;
            bottom: r(49);
        }
        .a4{
            position: absolute;
            right: r(85);
            bottom: 0;
        }
        .a5{
            position: absolute;
            left: 0;
           bottom: r(49);
        }
        .a6{
             position: absolute;
            left: 0;
            top: r(48);
        }
    }
    
}

footer{
    width: 100%;
    height: r(180);
    position: absolute;
    left: 0;
    bottom: 0;
    #backBtn{
        display: inline-block;
        width: r(41);
        height: r(41);
        position: absolute;
        right: r(56);
        bottom: r(25);
        img{
            width: 100%;
            height: 100%;
        }
    }
    span{
        display: inline-block;
        width: 100%;
        font-size: r(32);
        text-align: center;
        line-height: r(180);
        color: #e7c598;
    }
    
}

.table-tc{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    background: url('../img/wedding-bg.jpg')no-repeat;
    background-size:100% ;
    display: none;
    span{
        position: absolute;
        left: r(75);
        top: r(787);
        display: inline-block;
        width: r(500);
        color: #e7c598;
        font-size: r(28);
        text-align: center;
        #zhuozihao{
            color: #e08a0e;
        }
        #zuoweihao{
            color: #e05b0b;
        }
    }
    .jiuxishu{
        width: 90%;
        height: r(533);
        display: inline-block;
        position: absolute;
        left: r(60);
        top: r(180);
         .bigtable{
            width: r(285);
            height: r(273);
            background: #e7c598;
            color: #bf0c21;
            text-align: center;
            position: absolute;
            left: r(110);
            top: r(130);
            line-height: r(273);
            font-size: r(23);
            border-radius: 50%;
            box-shadow: r(5) r(5) rgba(0,0,0,.7);
            
        }
        .zhuowei{
            width: r(109);
            height: r(109);
            border-radius: 50%;
            font-size: r(14);
            text-align: center;
            line-height: r(109);
            box-shadow: r(5) r(3) rgba(0,0,0,.5);
            background:#e7c598 ; 
            color: #bf0c21;   
        }
        .a1{
            position: absolute;
            left: r(200);
            top: 0;
        }
        .a2{
            position: absolute;
            right: r(68);
            top: r(150);
        }
        .a3{
            position: absolute;
            right: r(68);
            bottom: r(93);
        }
        .a4{
            position: absolute;
            left: r(200);
            bottom: 0;
        }
        .a5{
            position: absolute;
            left: 0;
           bottom: r(93);
        }
        .a6{
             position: absolute;
            left: 0;
            top: r(150);
        }
        }
    
}
